<template>
	<view>
		<view :style="{height:height?height:(customBar+'px'),background:background}">
			<view :style="{height:customBar+'px'}" :class="[fixed?'custom-nvue-fixed':'']">
				<view :style="{height:statusBar+'px'}"></view>
				<view style="flex:1;width: 100%;" :style="{width:screenWidth+'px'}" class="custom-box-content-nvue" :class="[mode==2?'flex-x-b':'']">
					
					<!-- left -->
					<view  @click="goback" class="custom-left">
						<slot name="left"></slot>
					</view>
					<!-- left -->
					<!-- center -->
					<view class="custom-center" :style="{flex:mode == 1?'1':'auto',justifyContent:mode == 1?'flex-start':'center'}">
						<text style="font-size: 36rpx;" :style="{'color':titleColor}">{{title}}</text>
						<slot name="center"></slot>
					</view>
					<!-- center -->
					<!-- right -->
					<view class="custom-right">
						<slot name="right"></slot>
					</view>
					<!-- right -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "custom-nvue",
		props: {
			//是否固定，不会随着页面滚动
			fixed: {
				type: String,
				default: ''
			},
			//整个导航栏的高度决定是否占高
			height: {
				type: String,
				default: ''
			},
			//背景色，background属性
			background: {
				type: String,
				default: '#FFFFFF'
			},
			//显示模式 ，1：所有元素左浮动效果，2：标题居中显示
			mode: {
				type: [String, Number],
				default: 2
			},
			//中部标题
			title: {
				type: String,
				default: ''
			},
			//标题样式颜色
			titleColor: {
				type: String,
				default: '#333333'
			},
			//返回按钮样式颜色
			backColor: {
				type: String,
				default: '#333333'
			},
			//隐藏返回按钮
			hiddenBtn: {
				type: Boolean,
				default: false
			},
			pageBack: {
				type: Boolean,
				default: false
			},
		
		},
		data() {
			return {
				customBar: getApp().globalData.customBar,
				statusBar: getApp().globalData.statusBar,
				screenWidth:getApp().globalData.screenWidth,
				
			};
		},
		methods:{
			goback() {
				if (this.pageBack) {
					this.$emit('goback')
				} else {
					// this.uniBack();
					uni.navigateBack({
						delta:1,
						fail:()=>{
							uni.reLaunch({
								url:'/pages/shopping/shopping'
							})
						}
					})
				}
			},
		}
	}
</script>

<style>
	
	.custom-nvue-fixed {
		position: fixed;
		top: 0;
		left: 0;
	}
	.custom-box-content-nvue{
		flex-direction: row;
		font-size: 12px;
		color:red;
		
		
	}
	.flex-x-b{
		justify-content: space-between;
	}
	
	.custom-left{
		flex-direction: row;
		width: 80rpx;
		
		align-items: center;
		padding-left: 20rpx;
	}
	.custom-center{
		
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
	}
	
	.custom-right{
		flex-direction: row;
		justify-content: flex-end;
		width: 80rpx;
		
		align-items: center;
		padding-right: 20rpx;
	}
</style>
